import { Component } from 'react';
import PropTypes from 'prop-types';

class TodoItem extends Component {
    constructor(props) {
        super(props);
        this.handleDel = this.handleDel.bind(this); // 能提升性能
    }
    // 只有当子组件的props和state有变化时，才需要执行render函数，从而更新渲染子组件
    shouldComponentUpdate(nextProps, nextState) {
        // 父组件render重新渲染，会导致子组件render也重新渲染，影响性能
        if (nextProps.content !== this.props.content) {
            // 子组件接收的content的值发生了变化，子组件需要被重新渲染
            return true;
        } else {
            // 子组件接收的值未发生了变化，子组件不需要被重新渲染
            return false;
        }
    }
    handleDel() {
        // 接收父组件传递过来的属性和方法
        let { delItem, index } = this.props;
        delItem(index);
        // this.props.delItem(this.props.index);
    }
    render() {
        console.log('child render');
        let { content, test } = this.props;
        // return <li onClick={this.handleDel} dangerouslySetInnerHTML={{ __html: content }}></li>;
        return (
            <li onClick={this.handleDel}>
                {test}-{content}
            </li>
        );
    }
}
// 类型校验
TodoItem.propTypes = {
    content: PropTypes.string.isRequired, // 字符串类型，必传
    delItem: PropTypes.func,
    index: PropTypes.number,
    test: PropTypes.string.isRequired,
};
// 默认值
TodoItem.defaultProps = {
    test: 'hello',
};
export default TodoItem;
